<template>
	<view>
		


		<view class="" v-if="iskt">
			<view class="top" :style="{marginTop:height}">
			
			</view>
			<view class="sousuo">
				<u-search placeholder="请输入专业名称" height='60rpx' bgColor='#fff' placeholderColor='#C6C6C6'
					v-model="keyword" @custom="custom"></u-search>
			</view>
			<view class="con">
				<view class="con__box"
					:style="{height:'calc(100vh - 87rpx - 95.42rpx - 60rpx - 16rpx - '+height+' - '+bheight+')'}">
					<scroll-view scroll-y="true" class="con__box__l">
						<view class="con__box__l__list">
							<view class="con__box__l__item" v-for="(item,index) in llist" :key="index" @click="curindex=index,getrlist()" :class="curindex==index?'active':''">
								<view class="" style="position: relative;">
									<view class="" style="position: relative;z-index: 1;">
										{{item.title}}
									</view>
									<view class="line" v-if="curindex==index">
										
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<scroll-view scroll-y="true" class="con__box__r">
						<view class="con__box__r__list">
							<view class="con__box__r__item" v-for="(item,index) in rlist" :key="index" @click="navto('/pages/xzy/detail?id='+item.id)">
								<view class="">
									{{item.title}}
								</view>
								<image src="/static/cxx/Vector.png" class="con__box__r__item__icon" mode=""></image>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="" style="background-color: #f3f4f6;display: flex;align-items: center;justify-content: center;"
			:style="{height:'calc(100vh - 95.42rpx)'}" v-else>
			<u-empty mode='history' text='当前选择区域暂未开通,可联系客服开放'>
				<!-- <u-button type="primary"></u-button> -->
			</u-empty>
		</view>

		<tabbar :current="3"></tabbar>
	</view>
</template>

<script>
	import school from '@/api/_school.js'
	export default {
		data() {
			return {
				keyword: '',
				llist: [],
				rlist: [],
				curindex: 0,
				page: 1,
				page_size: 10,
				iskt:false
			};
		},
		computed: {
			height() {
				const height = `calc(${uni.$u.addUnit(uni.$u.sys().statusBarHeight, 'px')})`
				return uni.$u.deepMerge(height)
			},
			bheight() {
				const height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px');
				return uni.$u.deepMerge(height)
			},
		},
		methods: {
			async getlist() {
				let res = await school.majortype()
				if (res.data.code == 200) {
					this.llist = res.data.data
					this.getrlist()
				}
			},
			getrlist() {
				this.rlist = this.llist[this.curindex].child
				// console.log(this.curindex)
			},
			custom() {
				school.majortype({
					search_type: this.keyword
				}).then(res => {
					if (res.data.code == 200) {
						this.llist.map((t, i) => {
							if (t.id = res.data.data.id) {
								this.curindex = i
								this.getrlist()
								this.$forceUpdate()
							}
						})
					}
				})
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.iskt=uni.getStorageSync('schoolkt')
			this.llist=[]
			this.rlist=[]
			this.getlist()
		}
	}
</script>

<style lang="scss">
	page {
		background: url('https://mp-b54a63ff-3ce2-4df8-8d6e-f855d8976d34.cdn.bspapp.com/img/Rectangle_119.png') 100% no-repeat;
		background-position: top;
		width: 750rpx;
	}

	.top {
		padding-top: 87rpx;
	}

	.sousuo {
		padding: 0 40rpx;
		position: relative;
		margin-bottom: 10rpx;

		/deep/.u-search__action {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #747474;
			line-height: 40rpx;
		}
	}

	.con {
		padding: 0 24rpx;

		&__box {
			background: #e8f7ff;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(102, 141, 133, 0.25);
			border-radius: 57rpx 57rpx 0rpx 0rpx;
			display: flex;
			overflow: hidden;

			&__l {
				height: 100%;
				width: 246rpx;

				&__list {
					padding: 20rpx 0;
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				&__item {
					width: 225rpx;
					height: 94rpx;
					border-radius: 46rpx 46rpx 46rpx 46rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #636363;
					line-height: 40rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}

				.active {
					background-color: #fff;
					color: #292929;
				}

				.line {
					height: 15rpx;
					border-radius: 13rpx 13rpx 13rpx 13rpx;
					background-color: #b1ceff;
					position: absolute;
					width: 100%;
					bottom: 0;
					z-index: 0;
				}
			}

			&__r {
				height: 100%;
				width: calc(100% - 246rpx);
				background-color: #FFFFFF;
				border-radius: 57rpx 57rpx 0 0;

				&__list {
					padding: 20rpx 0;
				}

				&__item {
					height: 94rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 45rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 27rpx;
					color: #292929;
					line-height: 40rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;

					&__icon {
						width: 13.88rpx;
						height: 24.01rpx;
					}
				}
			}
		}
	}
</style>